<template>
    <a-spin :spinning="isLoading" tip="处理中...">
        <div id="app">
            <a-config-provider :locale="zh_CN">
                <router-view />
            </a-config-provider>
        </div>
    </a-spin>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import * as THREE from 'three';
var warnAudio = require('@/assets/audio/alarm.wav');
var onAudio = require('@/assets/audio/online.mp3');
var offAudio = require('@/assets/audio/offline.wav');
import {mapState} from 'vuex'
import {updateNotify} from '@/api/system/notify'

export default {
    name: 'App',
    data() {
        return {
            zh_CN,
            audio: null,
            alarmTypes: {
                highAlarm: '高限报警',
                lowAlarm: '低限报警',
                posAlarm: '变位报警',
                noAlarm: '报警恢复'
            },
            messageBox: [],
            messageKey:''
        };
    },
    computed: {
        ...mapState({
            isAudio: state => state.setting.isAudio,
            isLoading: state => state.setting.isLoading,
        })
    },
    methods: {
        /**
         * item  提示的对象内容
         * topic 消息主题 鉴别什么类型的消息
         * isTip 是否需要提示内容
         * （用于初始化手动触发）
         */
        setAudio(item,topic, isTip = true) {
            // let {message,deviceCode,messageId=''} = item;
            let lastIndex = topic.lastIndexOf('_');
            let messageId = topic.substr(lastIndex+1);
            let message = item;
            const key = messageId;
            let title = '';
            let that = this;
            let audioUrl = '';
            let duration = 0;
            let isLoop = false;

            if(topic.indexOf('alarm')>0){
                title = '告警提示';
                audioUrl = warnAudio;
                duration = 0;
                isLoop = true;
            }else if(topic.indexOf('notice')>0){
                title = '消息通知'
                // duration = 2;
                if (message.indexOf('离线') != -1) {
                    //上线
                    audioUrl = offAudio;
                }else{
                    audioUrl = onAudio;
                }
                // else if (message.indexOf('离线') != -1) {
                //     audioUrl = onAudio;
                // }
            }else{
                console.log('禁止提示')
                return false;
            }

            // let isHas = this.messageBox.find(item => item == deviceCode);
            // if (isHas) {
            //     return false;
            // }

            // this.messageBox.push(deviceCode);
            if(this.audio && isTip){
                this.audio.pause();
                this.audio = null;
            }

            if(this.messageKey){
                this.$notification.close(this.messageKey)
            }
            if (isTip) {
                this.messageKey = messageId
                let iconItem = ''
                // let iconItem = topic=='alarm'?<a-icon type="exclamation-circle" style="color: #e15714"/>:<a-icon type="bell" style="color: #91cc75"/>
                if(topic=='alarm'){
                    iconItem = <a-icon type="exclamation-circle" style="color: #e15714"/>
                }else if(topic=='auth'){
                    iconItem = <a-icon type="safety" style="color: #91cc75"/>
                }else{
                    iconItem = <a-icon type="bell" style="color: #91cc75"/>
                }
                this.$notification.warning({
                    message: title,
                    description: message,
                    duration,
                    icon: iconItem,
                    style: { wordWrap: 'break-word', whiteSpace: 'pre-wrap' },
                    onClose: async () => {
                        // this.messageBox = this.messageBox.filter(item=>item!=key);
                        // await dealAlarmLog({messageId,state:1})
                        this.messageKey = '';
                        if (that.audio) {
                            that.audio.pause();
                            that.audio = null;
                        }
                    },
                    onClick:async ()=>{
                        // this.messageBox = this.messageBox.filter(item=>item!=key);
                        await updateNotify({notifyLogId:messageId,status:1})
                        this.messageKey = '';
                        if (that.audio) {
                            that.audio.pause();
                            that.audio = null;
                        }
                        this.$notification.close(key)
                    },
                    // btn: h => {
                    //     if(topic=='notice'){
                    //         return '';
                    //     }
                    //     return h(
                    //         'a-button',
                    //         {
                    //             props: {
                    //                 type: 'primary',
                    //                 size: 'small'
                    //             },
                    //             on: {
                    //                 click: () => {
                    //                     that.audio.pause();
                    //                     that.audio = null;
                    //                     that.tip = false;
                    //                     this.$notification.close(key);
                    //                     this.$router.push({
                    //                         path: '/operation/monitor'
                    //                     });
                    //                 }
                    //             }
                    //         },
                    //         '查看'
                    //     );
                    // },
                    key
                });
            }

            if (!this.audio && audioUrl && this.isAudio) {
                //创建一个监听者
                var listener = new THREE.AudioListener();
                // 创建一个非位置音频对象  用来控制播放
                var audio = new THREE.Audio(listener);
                // 创建一个音频加载器对象
                var audioLoader = new THREE.AudioLoader();
                // 加载音频文件，返回一个音频缓冲区对象作为回调函数参数
                audioLoader.load(audioUrl, AudioBuffer => {
                    audio.setBuffer(AudioBuffer);
                    audio.setLoop(isLoop); //是否循环
                    if (!isTip) {
                        audio.setVolume(0); //音量
                    } else {
                        audio.setVolume(0.8); //音量
                    }
                    audio.play(); //play播放、stop停止、pause暂停
                    this.audio = audio;
                    if (!isTip) {
                        this.audio.pause();
                        this.audio = null;
                    }
                });
            } else {
                console.log('报警已存在');
            }
        },
        //清除所有弹出提示
        clearTipMessage(){
            if(this.audio){
                this.audio.pause();
                this.audio = null;
            }
            if(this.messageKey){
                console.log('清除')
                this.$notification.close(this.messageKey)
            }
        }
    },
    provide: function () {
        let that = this;
        const provides = {
            playAudio(data, topic, isTip = true) {
                that.setAudio(data, topic, isTip);
            },
            closeAudio() {
                if (that.audio) {
                    that.audio.pause();
                    that.audio = null;
                }
            },
            clearTip(){
                that.clearTipMessage();
            }
        };
        return provides;
    }
};
</script>
